{% extends "base.html" %}
{% block title %}Submit Case - AI Legal Assistant{% endblock %}

{% block extra_styles %}
<style>
.submit-container { max-width: 760px; margin: 0 auto; }
.ai-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(29,78,216,0.07); color: var(--accent-dark); border: 1px solid rgba(29,78,216,0.18); padding: 0.3rem 0.9rem; border-radius: 20px; font-size: 0.82rem; font-weight: 600; }
.tips { background: #FFFBEB; border: 1px solid rgba(150,102,10,0.25); border-radius: 10px; padding: 1.2rem; margin-bottom: 1.5rem; }
.tips h4 { color: #92400e; margin-bottom: 0.5rem; font-size: 0.9rem; }
.tips ul { color: #78350f; font-size: 0.85rem; padding-left: 1.2rem; line-height: 2; }
.loading-overlay { display: none; position: fixed; inset: 0; background: rgba(15,21,34,0.82); backdrop-filter: blur(4px); z-index: 999; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: #fff; text-align: center; }
.loading-overlay.active { display: flex; }
.big-spinner { width: 60px; height: 60px; border: 5px solid rgba(255,255,255,0.2); border-radius: 50%; border-top-color: #6E96F5; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.char-count { font-size: 0.8rem; color: var(--text-muted); text-align: right; margin-top: 0.3rem; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="submit-container">
        <h1 class="page-title"><i class="fas fa-file-alt"></i> Submit Your Case</h1>
        <p class="page-subtitle">Describe your legal issue in detail for AI-powered analysis.</p>

        <div class="tips">
            <h4><i class="fas fa-lightbulb"></i> Tips for a better analysis:</h4>
            <ul>
                <li>Describe all parties involved (you, the other party)</li>
                <li>Include dates, locations, and amounts if relevant</li>
                <li>Mention any existing documents or agreements</li>
                <li>Explain what outcome you are seeking</li>
            </ul>
        </div>

        <div class="card">
            <div class="card-header">
                <i class="fas fa-brain"></i> Case Description
                <span class="ai-badge" style="margin-left:auto;"><i class="fas fa-robot"></i> Gemini AI</span>
            </div>
            <div class="card-body">
                <form method="POST" action="/client/submit-case" onsubmit="showLoading()">
                    <div class="form-group">
                        <label class="form-label">Describe your legal issue <span style="color:var(--danger);">*</span></label>
                        <textarea
                            name="description"
                            class="form-control"
                            style="min-height: 220px;"
                            placeholder="Example: I purchased a plot of land in DHA Lahore in 2019 from Mr. Ali for PKR 1.5 crore. I paid the full amount and received a token receipt but after 2 years he is claiming the agreement is invalid and has filed a case to take back the land. I have all payment proofs and witnesses..."
                            required
                            minlength="20"
                            id="descTextarea"
                            oninput="updateCount()"
                        ></textarea>
                        <div class="char-count"><span id="charCount">0</span> characters (minimum 20)</div>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
                        <p style="color:var(--text-muted);font-size:0.85rem;"><i class="fas fa-info-circle"></i> Analysis typically takes 5-15 seconds</p>
                        <button type="submit" class="btn btn-accent" style="font-size:1rem;padding:0.75rem 2rem;" id="submitBtn">
                            <i class="fas fa-brain"></i> Analyze with AI
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="loading-overlay" id="loadingOverlay">
    <div class="big-spinner"></div>
    <h3 style="font-size:1.3rem;">Analyzing Your Case...</h3>
    <p style="color:rgba(255,255,255,0.8);max-width:300px;">Reading your description, classifying the case, and preparing guidance.</p>
</div>

<script>
function showLoading() {
    document.getElementById('loadingOverlay').classList.add('active');
    document.getElementById('submitBtn').disabled = true;
}
function updateCount() {
    document.getElementById('charCount').textContent = document.getElementById('descTextarea').value.length;
}
</script>
{% endblock %}